<template>
  <iframe :src="src" ref="myIframe" frameborder="no" width="100%" scrolling="no" allowtransparency="true"/>
</template>
<script lang="ts">
import {Component, Prop, Ref, Vue} from 'vue-property-decorator';

@Component
export default class IframeComponent extends Vue {
  @Prop({default: ''}) private url!: string;

  get src() {
    return process.env.VUE_APP_BASE_API + this.url;
  }

  private timer: any;
  @Ref('myIframe') private myIframe: any;

  changeFrameHeight() {
    if (this.myIframe) {
      if (this.myIframe.contentDocument && this.myIframe.contentDocument.body) {
        this.myIframe.height = this.myIframe.contentDocument.body.clientHeight;
      }
    }
  }

  mounted() {
    this.timer = window.setInterval(() => this.changeFrameHeight(), 200);
  }

  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<style scoped lang="scss">

</style>

